@import "_reset.scss";
@import "_jc_tool.scss";
@charset "utf-8";

.wrap{

    width: r(640px);
   
    background: $bg;
}

.head-bar {
    background: white;
    position: relative;
    font-size: r(0px);
    width: r(640px);
    height: r(87px);
    
    >p {
        text-align: center;
        position: absolute;
        font-size: r(35px);
        width: r(485px);
        height: r(40px);
        line-height: r(40px);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        letter-spacing: r(3px);
    }
    .back-img{
        position: absolute;
        width: r(44px);
        height: r(70px);
        bottom: r(10px);
        left: r(15px);
        padding-top: r(15px);
        padding-left: r(15px);
    }
    img {

        width: r(22px);
        height: r(37px);
    }
    .span-jilu{
        position: absolute;
        right: r(15px);
        top:r(23px);
        width: r(110px);
        height: r(37px);
        font-size:r(26px);
        color: $value-fontColor;
    }
}

.chat-section{
    width: r(640px);
    min-height:r(908px);
    background: $bg;
    margin-bottom: r(100px);
}
.bottom-bar {
    font-size: 0;
    position: fixed;
    bottom: 0;
    width: r(640px);
    height: r(100px);
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .input{
        padding-top: r(1px);
        width: r(435px);
        height: r(68px);
        border: r(1px) solid #c1c1c1;
        border-radius: r(5px);
        .chat-input{
            width: r(432px);
            height: r(64px);
            padding: r(10px);
            border: none;
            outline: none;
        }
    }
    .emoji{
        width: r(51px);
        height: r(51px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .add{
        width: r(55px);
        height: r(50px);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.time{
    width: r(80px);
    height: r(35px);
    text-align: center;
    line-height: r(35px);
    font-size: r(24px);
    color: white;
    background: #c9cecf;
    margin: r(26px) auto;
    border-radius: r(5px);
}
.msgta{
    font-size: 0;
    display: flex;
    margin-bottom: r(64px);
}
.chat-section{
    padding: 0px r(20px);
}
.touxiang{
      
    width: r(92px);
    height: r(92px);
     border-radius: r(50px);
     overflow: hidden;
     .touxiang-img{
          width: 100%;
         height:100%;
     }

 
 }

 .msg-tabox{
     position: relative;
     min-width: r(80px);
     max-width: r(440px);
     min-height: r(75px);
     font-size: r(30px);
     background: white;
     padding: r(10px);
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: r(25px);
     border-radius: r(10px);
    &::before{
        content: "";
        position: absolute;
        border-right: r(15px) solid #ffffff;
        border-bottom: r(20px) solid $bg;
        left: r(-15px);
        top:30%;
    }
 }
 
 .msg-youbox{
    position: relative;
    min-width: r(80px);
    max-width: r(440px);
    min-height: r(75px);
    font-size: r(30px);
    background:#d62d31;
    color: white;
    padding: r(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: r(25px);
    border-radius: r(10px);
   &::before{
       content: "";
       position: absolute;
       border-left: r(15px) solid #d62d31;
       border-bottom: r(20px) solid $bg;
       right: r(-15px);
       top:30%;
   }
}

.msgyou{
    font-size: 0;
    display: flex;
    margin-bottom: r(64px);
    justify-content: flex-end;
}